<template>
  <div class="page-header-index-wide">
    <a-row :gutter="12">
      <a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }">

        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <a-radio-group v-model="indexRegisterType" @change="changeRegisterType">
              <a-radio-button value="date">按日</a-radio-button>
              <a-radio-button value="month">按月</a-radio-button>
            </a-radio-group>
          </div>
          <a-tab-pane tab="销售看板" key="1">
            <a-table :loading="tabLoading" :dataSource="dataSource1" size="default" rowKey="storeId" :columns="columns" :pagination="false"
                     @change="tableChange1">
              <template slot="flowRate" slot-scope="text, record, index">
                <a-progress :strokeColor="getPercentColor(record.finishRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.finishRate)" style="width:80px" />
              </template>
            </a-table>
          </a-tab-pane>

        </a-tabs>


      </a-card>
    </a-row>

  </div>
</template>


<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'
import { getAction } from '@/api/manage'
import BarMultid from '@/components/chart/BarMultid'

const dataCol2 = [
  {
    title: '店铺',
    align: 'center',
    dataIndex: 'storeName'
  },
  {
    title: '当月目标',
    align: 'center',
    dataIndex: 'kpiAmount'
  },
  {
    title: '当月营业额',
    align: 'center',
    dataIndex: 'currentOrderAmount',
    sorter: (a, b) => a.currentOrderAmount - b.currentOrderAmount,
  },
  {
    title: '门店营业额',
    align: 'center',
    dataIndex: 'currentStoreAmount',
    sorter: (a, b) => a.currentStoreAmount - b.currentStoreAmount,
  },
  {
    title: '商城销售额',
    align: 'center',
    dataIndex: 'currentOnlineAmount',
    sorter: (a, b) => a.currentOnlineAmount - b.currentOnlineAmount,
  },
  {
    title: '上月营业额',
    align: 'center',
    dataIndex: 'prevOrderAmount',
    sorter: (a, b) => a.prevOrderAmount - b.prevOrderAmount,
  },
  {
    title: '月达成',
    align: 'center',
    dataIndex: 'finishRate',
    scopedSlots: { customRender: 'flowRate' }
  }/*,
  {
    title: '主推产品占比',
    align: 'center',
    dataIndex: 'recommendRate'
  }*/
]

const dataCol1 = [
  {
    title: '店铺',
    align: 'center',
    dataIndex: 'storeName'
  },
  {
    title: '今日目标',
    align: 'center',
    dataIndex: 'kpiAmount'
  },
  {
    title: '今日营业额',
    align: 'center',
    dataIndex: 'currentOrderAmount',
    sorter: (a, b) => a.currentOrderAmount - b.currentOrderAmount,
  },
  {
    title: '门店营业额',
    align: 'center',
    dataIndex: 'currentStoreAmount',
    sorter: (a, b) => a.currentStoreAmount - b.currentStoreAmount,
  },
  {
    title: '商城销售额',
    align: 'center',
    dataIndex: 'currentOnlineAmount',
    sorter: (a, b) => a.currentOnlineAmount - b.currentOnlineAmount,
  },
  {
    title: '昨日营业额',
    align: 'center',
    dataIndex: 'prevOrderAmount',
    sorter: (a, b) => a.prevOrderAmount - b.prevOrderAmount,
  },
  {
    title: '日达成',
    align: 'center',
    dataIndex: 'finishRate',
    scopedSlots: { customRender: 'flowRate' }
  }/*,
  {
    title: '主推产品占比',
    align: 'center',
    dataIndex: 'recommendRate'
  }*/
]

export default {
  name: 'IndexBdc',
  components: {
    BarMultid,
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo
  },
  data() {
    return {
      height: 380,
      loading: true,
      tabLoading: false,
      center: null,
      //rankList,
      //barData,
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      indexData: {},
      // 表头
      columns: dataCol1,
      dataSource1: [],
      indexRegisterType: 'date',
      url: {
        indexInit: '/home/homePage/indexInit',
        indexInitStore: '/home/homePage/indexInitStore',
      },
      indicator: <a-icon type="loading" style="font-size: 24px" spin/>
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initStoreInfo()
  },
  computed: {
  },
  methods: {
    tableChange1(pagination){
      console.log(pagination)
    },
    changeRegisterType(e) {
      this.indexRegisterType = e.target.value
      if(this.indexRegisterType=="date"){
        this.columns = dataCol1
      }else{
        this.columns = dataCol2
      }
      this.initStoreInfo()
    },
    initStoreInfo() {
      this.dataSource1 = []
      this.tabLoading = true
      getAction(this.url.indexInitStore,{type : this.indexRegisterType}).then((res) => {
        if (res.success) {
          this.dataSource1 = res.result
        }
      }).finally(() => {
        this.tabLoading = false
      })
    },
    getFlowRateNumber(value){
      return Number(value)
    },
    getPercentFormat(value){
      return value+"%"
    },
    getPercentColor(value){
      let p = Number(value)
      if(p>=90 && p<100){
        return 'rgb(244, 240, 89)'
      }else if(p>=100){
        return 'rgb(0, 205, 0)'
      }else{
        return 'rgb(24,144,255)'
      }
    },
  }
}
</script>


<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .item-group {
    padding: 20px 0 8px 24px;
    font-size: 0;
    a {
      color: rgba(0, 0, 0, 1);
      display: inline-block;
      font-size: 14px;
      margin-bottom: 13px;
      width: 25%;
    }
  }

  .item-group {
    .more-btn {
      margin-bottom: 13px;
      text-align: center;
    }
  }

  .list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
  }

  @media only screen and (min-width: 1600px) {
    .list-content-item{
      margin-left:60px;
    }
  }

  @media only screen and (max-width: 1300px) {
    .list-content-item{
      margin-left:20px;
    }
    .width-hidden4{
      display:none
    }
  }
  .list-content-item{
    span{line-height: 20px;}
  }
  .list-content-item{
    p{margin-top: 4px;margin-bottom:0;line-height:22px;}
  }
  .anty-list-cust {
    .ant-list-item-meta{flex: 0.3 !important;}
  }
  .anty-list-cust {
    .ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
  }


</style>